<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="案例-列表.css">
    <style>
        #temper{
            display: none;
        }
    </style>
</head>
<body>
    <header>
        <div class="head">
            <div class="title">
                <img src="2.png" alt="">
                <p>网络全案营销服务提供商</p>
            </div>
            <nav>
                <a href="首页.html">网站首页</a>
                <a href="" >传悦资源</a>
                <a href="案例-列表.html" id="two">传悦案例</a>
                <a href="">传悦服务</a>
                <a href="解决方案-列表.html">解决方案</a>
                <a href="">需求提交</a>
            </nav>
            <div class="head-right">
                <img src="images/iphon_03.png" alt="">
                <span>0535-00652109</span>
                <img src="images/love_03.jpg" alt="">
                <img src="images/love_05.jpg" alt="">
                <img src="images/love_07.jpg" alt="">
                <img src="images/love_09.png" alt="">
            </div>
            
        </div>
    </header>
    <section>
        <div class="banner">
            <div class="banner-cent">
                <span>网站首页</span>
                &gt;
                <span>传悦案例</span>
            </div>
        </div>
    </section>
    <article>
        <div class="express">
            <ul class="express-top">
                <li id="holedot">全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全案</li>
            </ul>
            <ul class="express-center">
                <li id="temper">
                    <a href="案例-详情.html">

                        <img src="" class="picture">
                        <h3 class="web"></h3>
                        <h5>
                            <span class="oney"></span>
                            <span class="young"></span>
                            <span class="squire"></span>
                            <span class="poinert"></span>
                        </h5>
                    </a>
                   
                </li>
                <!-- <li>
                    <img src="images/img2.png" alt="">
                    <h3>金数据项目推广</h3>
                    <h5>
                        <span>引导性消费</span>
                        <span>品牌定向推广</span>
                        <span>整合营销</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img3.png" alt="">
                    <h3>开门红商场推广运营</h3>
                    <h5>
                        <span>品牌曝光</span>
                        <span>引导销售</span>
                        <span> 开门红商场</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img4.png" alt="">
                    <h3>北纬27度葡萄酒商城推广</h3>
                    <h5>
                        <span>品牌曝光</span>
                        <span>引导销售</span>
                        <span> 电子商务网站</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img1.png" alt="">
                    <h3>众德集团&nbsp;&nbsp;&nbsp;网站建设</h3>
                    <h5>
                    <span>网站建设</span>
                   <span>品牌形象</span>
                   <span>整合营销</span>
                   <span>引导销售</span>
                    </h5>
                   
                </li>
                <li>
                    <img src="images/img2.png" alt="">
                    <h3>金数据项目推广</h3>
                    <h5>
                        <span>引导性消费</span>
                        <span>品牌定向推广</span>
                        <span>整合营销</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img3.png" alt="">
                    <h3>开门红商场推广运营</h3>
                    <h5>
                        <span>品牌曝光</span>
                        <span>引导销售</span>
                        <span> 开门红商场</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img4.png" alt="">
                    <h3>北纬27度葡萄酒商城推广</h3>
                    <h5>
                        <span>品牌曝光</span>
                        <span>引导销售</span>
                        <span> 电子商务网站</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img1.png" alt="">
                    <h3>众德集团&nbsp;&nbsp;&nbsp;网站建设</h3>
                    <h5>
                    <span>网站建设</span>
                   <span>品牌形象</span>
                   <span>整合营销</span>
                   <span>引导销售</span>
                    </h5>
                   
                </li>
                <li>
                    <img src="images/img2.png" alt="">
                    <h3>金数据项目推广</h3>
                    <h5>
                        <span>引导性消费</span>
                        <span>品牌定向推广</span>
                        <span>整合营销</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img3.png" alt="">
                    <h3>开门红商场推广运营</h3>
                    <h5>
                        <span>品牌曝光</span>
                        <span>引导销售</span>
                        <span> 开门红商场</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img4.png" alt="">
                    <h3>北纬27度葡萄酒商城推广</h3>
                    <h5>
                        <span>品牌曝光</span>
                        <span>引导销售</span>
                        <span> 电子商务网站</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img1.png" alt="">
                    <h3>众德集团&nbsp;&nbsp;&nbsp;网站建设</h3>
                    <h5>
                    <span>网站建设</span>
                   <span>品牌形象</span>
                   <span>整合营销</span>
                   <span>引导销售</span>
                    </h5>
                   
                </li>
                <li>
                    <img src="images/img2.png" alt="">
                    <h3>金数据项目推广</h3>
                    <h5>
                        <span>引导性消费</span>
                        <span>品牌定向推广</span>
                        <span>整合营销</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img3.png" alt="">
                    <h3>开门红商场推广运营</h3>
                    <h5>
                        <span>品牌曝光</span>
                        <span>引导销售</span>
                        <span> 开门红商场</span>
                    </h5>
                </li>
                <li>
                    <img src="images/img4.png" alt="">
                    <h3>北纬27度葡萄酒商城推广</h3>
                    <h5>
                        <span>品牌曝光</span>
                        <span>引导销售</span>
                        <span> 电子商务网站</span>
                    </h5>
                </li> -->
            </ul>
            <ul class="express-bottom">
                <li >&lt;</li>
                <li id="bottom">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>&gt;</li>
            </ul>
        </div>
    </article>
    <footer>
        <div class="foot">
                <img src="images/bottom_logo.png" alt="">
            <div class="fot-right">
                <ul>
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <h6>Copyright &copy;创梦网络科技有限责任公司 || 传悦  Chnyoo.cn All Rights Reserved  京ICP备120052221号 </h6>
            </div>
        </div>
    </footer>
</body>
</html>
<script>
    let ul = document.querySelector(".express-center")
    let temper = document.querySelector("#temper");

    let http = new XMLHttpRequest();
    http.open("get","http://10.35.164.193:81/firstPage");
    http.send();
    http.onreadystatechange = function(){
        if(http.readyState === 4){
            let resualt = JSON.parse(http.responseText);
            resualt.forEach(function(item){
                let newLi = temper.cloneNode(true);
                newLi.id = "";
                newLi.style.cursor = "pointer";
                ul.append(newLi)
                newLi.querySelector(".picture").src = item.screem;
                newLi.querySelector(".web").innerHTML = item.title;
                newLi.querySelector(".oney").innerHTML = item.build;
                newLi.querySelector(".young").innerHTML = item.progrem;
                newLi.querySelector(".squire").innerHTML = item.sell;
                newLi.querySelector(".poinert").innerHTML = item.point;
                newLi.setAttribute("li-id",item.id)
                newLi.onclick = function(){
                    let id = newLi.getAttribute("li-id")
                //    console.log(id)
                    let http = new XMLHttpRequest();
                    http.open("get",`http://10.35.164.193:81/click?id=${id}`)
                    http.send();
                    http.onreadystatechange = function(){
                        if(http.readyState === 4){

                        }
                    }
                }
            })
        }
    } 
</script>